<template>
  <div ref="orderGoods" class="orderGoods">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="orderGoodsForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <!-- 来源系统不能为空 -->
          <el-form-item
            prop="sourceSystem"
            label="来源系统"
            :rules="[
              { required: true, message: '请选择来源系统', trigger: ['blur', 'change'] }
            ]"
          >
            <el-select v-model="formData.sourceSystem" disabled filterable clearable placeholder="请选择来源系统">
              <el-option
                v-for="list in sourceList"
                :key="list.code"
                :value="list.code"
                :label="list.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="platformCode" label="平台名称"> <!-- platformId -->
            <el-select v-model="formData.platformCode" filterable clearable placeholder="请选择平台名称">
              <el-option
                v-for="(list, index) in onlinePlatformOption"
                :key="index"
                :value="list.code"
                :label="list.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="pcode" label="平台单号">
            <el-input v-model.trim="formData.pcode" clearable placeholder="请输入平台单号" />
          </el-form-item>
          <el-form-item prop="code" label="电商单号">
            <el-input v-model.trim="formData.code" placeholder="请输入电商单号" />
          </el-form-item>
          <el-form-item prop="buyer" label="顾客ID">
            <el-input v-model.trim="formData.buyer" placeholder="请输入顾客ID" />
          </el-form-item>
          <el-form-item prop="receiver" label="顾客姓名">
            <el-input v-model="formData.receiver" placeholder="请输入顾客姓名" />
          </el-form-item>
          <el-form-item prop="receiverPhone" label="联系方式">
            <el-input v-model.trim="formData.receiverPhone" placeholder="请输入联系方式" />
          </el-form-item>
          <el-form-item prop="receiverAddress" label="顾客收货地址">
            <el-input v-model.trim="formData.receiverAddress" placeholder="请输入顾客收货地址" />
          </el-form-item>
          <el-form-item align="right">
            <Button @click="resetForm('orderGoodsForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('orderGoodsForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box
        ref="orderGoodsTable"
        :no-request="true"
        :table-config="orderGoodsTableConfig"
      />
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { getDictByType } from '@/api/dataDict'
import { JsonToUrl } from '@/utils/params-format'
import { getPlatformInfoB2CECO } from '@/api/mscInfo'
import { json2FormData } from '@/utils'

export default {
  name: 'InfoDataGoods',
  components: {
    ContentWrap,
    FormContainer,
    Button
  },
  data() {
    return {
      onlinePlatformOption: [],
      platformBillStatusOption: [],
      // eslint-disable-next-line
      sourceList: [{ code: '0', name: 'B2C' }, { code: '1', name: 'ECO' }],
      formData: {
        // FIX: 33813   信息数据查询--电商订单--来源系统：取消ECO这个选项，这里默认且只有B2C这个选项。
        sourceSystem: '0', // 来源系统
        platformCode: '', // 平台名称
        pcode: '', // 平台单号
        code: '', // 电商单号
        buyer: '', // 顾客ID
        receiver: '', // 顾客姓名
        receiverPhone: '', // 顾客联系方式
        receiverAddress: '' // 顾客收货地址
      },
      formRules: {},
      // url: '/call-center/api/v1/mscInfo/b2c/order/list',
      orderGoodsTableConfig: {
        interfacePath: '',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段信息配置
        setting: [
          {
            prop: 'id',
            label: '序号',
            width: 80,
            formatData: function(val) { return val.keyIndex + 1 }
          }, {
            prop: 'pcode',
            label: '平台单号',
            className: 'table-handelclick-text',
            isButton: true,
            clickFun: this.orderDetailClick
          }, {
            prop: 'platformName',
            label: '平台名称'
          }, {
            prop: 'orderType',
            label: '订单类型',
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'ORDERTYPE'
            }
          }, {
            prop: 'billStatus',
            label: '订单状态',
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'MSC_ORDER_STATUS'
            }
          }, {
            prop: 'isException',
            label: '异常标识',
            formatData: (val) => {
              if (val.isException === 1) return '是'
              if (val.isException === 0) return '否'
              return '--'
            }
          }, {
            prop: 'exceptionType',
            label: '异常原因',
            formatData: (val) => {
              if (val.exceptionType) return val.exceptionType
              return '--'
            }
          }, {
            prop: 'code',
            label: '电商单号'
          }, {
            prop: 'platformBillStatus',
            label: '平台状态',
            width: 100,
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'PLATFORMBILLSTATUS'
            }
          }
        ]
      }
    }
  },
  computed: {
    url() {
      return this.formData.sourceSystem === '1' || this.formData.sourceSystem === 1 ? '/call-center/api/v1/mscInfo/eco/order/list' : '/call-center/api/v1/mscInfo/b2c/order/list'
    }
  },
  created() {
    this.initPlatformList()
    // 通话记录过来
    this.formTelRecord()
    // 检查是否是通过来电弹屏的跳转
    this.detailByDisplay()
    // this.getDataDict({ type: 'platformBillStatus', ditctType: 'PLATFORMBILLSTATUS' }) // 初始化电商平台状态
  },
  methods: {
    /**
     * 提交查询
     */
    searchClick(formName) {
      const that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          const orderGoodsParams = JsonToUrl(this.formData)
          if (!orderGoodsParams) {
            this.$message({
              message: '请至少输入一项查询条件',
              type: 'warning'
            })
            return
          }
          that.orderGoodsTableConfig.interfacePath = `${that.url}${orderGoodsParams}`
          that.$nextTick(() => {
            that.$refs.orderGoodsTable.initTableData()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取数据字典
    getDataDict({ type, ditctType }) {
      const dictTypeCode = ditctType
      const appCode = 'call-center'
      const domainCode = 'marketing'
      const parmas = {
        dictTypeCode,
        appCode,
        domainCode
      }
      getDictByType(parmas).then(res => {
        const data = res.data || []
        if (Array.isArray(data)) {
          if (type === 'platformBillStatus') this.platformBillStatusOption = data
        }
      })
    },
    /**
     * 初始化电商平台
     */
    initPlatformList() {
      const data = json2FormData({
        pageFlag: false
      })
      getPlatformInfoB2CECO(data).then(res => {
        if (res.success === 1) {
          this.onlinePlatformOption = res.data.records
        }
      })
    },
    /**
     * 点击平台单号查询详细
     */
    orderDetailClick(row) {
      if ((row.sourceSys && row.sourceSys === 'eco') || Number(row.sourceSystem || 0) === 1) {
        this.$router.push({ path: `/infoData/orderGoods/ecoDetail`, query: { id: row.id }})
      } else {
        this.$router.push({ path: `/infoData/orderGoods/detail`, query: { id: row.id, sourceSystem: '0' }})
      }
    },
    // 从来电弹屏过来，详细界面
    detailByDisplay() {
      const q = this.$route.query
      if (q.id) {
        this.orderDetailClick(q)
      }
      if (q.callTel) {
        this.$set(this.formData, 'receiverPhone', q.callTel)
      }
    },
    // 从通话记录过来
    formTelRecord() {
      const q = this.$route.query
      if (q.form === 'telRecord') {
        this.$set(this.formData, 'pcode', q.callOrderCode)
      }
      if (q.callTel) {
        this.$set(this.formData, 'sourceSystem', q.sourceSystem)
        this.$set(this.formData, 'receiverPhone', q.callTel)
      }
    },
    /**
     * 重置搜索表单
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scope>
.orderGoods {
  .el-tooltip {
    .table-other {
      & span.table-handelclick-text {
        color: #3DC094 !important;
      }
    }
  }
}
.el-tooltip .table-other span.table-handelclick-text {
  color: #3DC094;
  cursor: pointer;
}
</style>
